/* The listingsGrid is used anywhere were a grid of listings is shown. Currently this includes
   the store and search results views. Make sure to check both when making changes to this file.
 */

/* These are the values to use if the inventory column is turned back on.
$crytoListViewTradeFromWidth: 9%;
$crytoListViewTradeToWidth: 16%;
$crytoListViewTradeArrowWidth: 7%;
$crytoListViewVendorWidth: 28%;
$crytoListViewPriceWidth: 19%;
$crytoListViewInventoryMaxWidth: 21%;
*/

$crytoListViewTradeFromWidth: 10%;
$crytoListViewTradeArrowWidth: 5%;
$crytoListViewTradeToWidth: 15%;
$crytoListViewVendorWidth: 38%;
$crytoListViewPriceWidth: 32%;

.listingsGrid {
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
  z-index: 0; // contain any positioned elements

  &:before,
  &:after {
    // this creates a pair of pseudo elements that fill any gaps in the last row of the grid
    // this only works when the grid is 3 across. We'll need a fancier solution for other numbers
    content: '';
    width: 225px;
    order: 999999999;
  }

  .listingCard {
    margin-bottom: $padMd;
    font-size: $tx5b;
  }

  .userCard {
    // user cards can be shown in test results, style them to look like listing cards
    width: 225px;
    height: 283px;
    margin-bottom: $padMd;
    font-size: $tx5b;

    .shortHeader {
      width: 223px;
      height: 225px;
      margin-bottom: 0;

      .userIconWrap {
        top: 201px;
        right: 8px;
        left: auto;
      }

      .userControls {
        bottom: auto;
        right: $pad;
        left: $pad;
        top: $pad;
        width: auto;
      }
    }

    .content {
      height: 56px;
      padding: $pad;

      .contentTop {
        height: 72px;

        .userName,
        .userDescription {
          font-size: $tx5b;
          -webkit-line-clamp: 1;
        }

        .userName {
          width: calc(100% - 42px);
        }
      }
      .contentBottom {
        display: none;
      }
    }
  }

  &.listingsGridListView, &.listingsGridCryptoListView {
    margin: 0;
    align-content: flex-start;

    .listingCard {
      margin: 0;
      border-radius: 0;
      padding: 6px 10px;
      box-sizing: border-box;
      font-size: $tx5;

      &:first-child {
        // we want the first listView row to have a border radius
        border-top-left-radius: $corner;
        border-top-right-radius: $corner;
      }

      &:last-child {
        // we want the last listView row to have a border radius
        border-bottom-left-radius: $corner;
        border-bottom-right-radius: $corner;
        margin-bottom: $padMd;
      }

      &:not(:last-child):not(:focus):not(.ListingCard-errorCard) {
        border-bottom-color: transparent;

        &:hover {
          border-bottom-color: inherit;
        }
      }
    }
  }

  &.listingsGridCryptoListView {

    .tradeFromCol {
      width: $crytoListViewTradeFromWidth;
      margin-right: 0;
    }

    .tradeToCol {
      width: $crytoListViewTradeToWidth;
    }

    .tradeArrowCol {
      width: $crytoListViewTradeArrowWidth;
      margin-right: 0;
    }

    .vendorCol {
      width: $crytoListViewVendorWidth;
    }

    .priceCol {
      width: $crytoListViewPriceWidth;
    }

    /* Commented out until inventory is working again.
    .inventoryCol {
      width: $crytoListViewInventoryMaxWidth;
    }
    */
  }

  &:empty {
    &::after {
      content: attr(data-no-results-text);
    }
  }
}

.cryptoListViewHeader {
  padding: 15px 10px;
  border-width: 1px;
  border-style: solid;
  border-bottom-width: 0;
  margin-bottom: 0;
  font-size: $tx6;
  text-transform: uppercase;
  word-break: break-word;
  hyphens: auto;

  .tradeFromCol {
    width: $crytoListViewTradeFromWidth;
    margin-right: 0;
  }

  .tradeToCol {
    width: $crytoListViewTradeToWidth;
  }

  .tradeArrowCol {
    width: $crytoListViewTradeArrowWidth;
    margin-right: 0;
  }

  .vendorCol {
    width: $crytoListViewVendorWidth;
  }

  .priceCol {
    width: $crytoListViewPriceWidth;
    text-align: right;

    .subText {
      text-transform: none;
    }
  }

  /* Commented out until inventory is working again.
  .inventoryCol {
    text-align: right;
    max-width: $crytoListViewInventoryMaxWidth;
  }
  */

  .toolTip {
    text-transform: none;
  }
}
